<template>
    <div class="page">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
            <van-tab title="自营数据" name="direct"></van-tab>
            <van-tab title="下级团队" name="below"></van-tab>
        </van-tabs>
        <div style="padding: 10px">
            <!-- 同比趋势 -->
            <div class="card">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    同比趋势
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月总交易量(元)</div>
                        <div class="num">{{ yoydataInfo.transAmount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月同期交易量</div>
                        <div class="num">{{ yoydataInfo.lastYearTransAmount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>同比%</div>
                        <div class="num">
                            {{ yoydataInfo.transAmountYoy }}%
                            <img v-if="Number(yoydataInfo.transAmountYoy) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(yoydataInfo.transAmountYoy) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月总交易笔数</div>
                        <div class="num">{{ yoydataInfo.transNum }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月同期交易笔数</div>
                        <div class="num">{{ yoydataInfo.lastYearTransNum }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>同比%</div>
                        <div class="num">
                            {{ yoydataInfo.transNumYoy }}%
                            <img v-if="Number(yoydataInfo.transNumYoy) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(yoydataInfo.transNumYoy) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月唤醒数</div>
                        <div class="num">{{ yoydataInfo.activateCount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月同期唤醒数</div>
                        <div class="num">{{ yoydataInfo.lastYearActivateCount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>同比%</div>
                        <div class="num">
                            {{ yoydataInfo.activateCountYoy }}%
                            <img v-if="Number(yoydataInfo.activateCountYoy) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(yoydataInfo.activateCountYoy) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月达标数</div>
                        <div class="num">{{ yoydataInfo.qualifyCount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月同期达标数</div>
                        <div class="num">{{ yoydataInfo.lastYearQualifyCount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>同比%</div>
                        <div class="num">
                            {{ yoydataInfo.qualifyCountYoy }}%
                            <img v-if="Number(yoydataInfo.qualifyCountYoy) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(yoydataInfo.qualifyCountYoy) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 环比趋势 -->
            <div class="card">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    环比趋势
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月总交易量(元)</div>
                        <div class="num">{{ qoqdataInfo.transAmount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月交易量(元)</div>
                        <div class="num">{{ qoqdataInfo.lastMonthTransAmount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>环比%</div>
                        <div class="num">
                            {{ qoqdataInfo.transAmountQoq }}%
                            <img v-if="Number(qoqdataInfo.transAmountQoq) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(qoqdataInfo.transAmountQoq) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月总交易笔数</div>
                        <div class="num">{{ qoqdataInfo.transNum }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月交易笔数</div>
                        <div class="num">{{ qoqdataInfo.lastMonthTransNum }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>环比%</div>
                        <div class="num">
                            {{ qoqdataInfo.transNumQoq }}%
                            <img v-if="Number(qoqdataInfo.transNumQoq) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(qoqdataInfo.transNumQoq) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月唤醒数</div>
                        <div class="num">{{ qoqdataInfo.activateCount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月唤醒数</div>
                        <div class="num">{{ qoqdataInfo.lastMonthActivateCount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>环比%</div>
                        <div class="num">
                            {{ qoqdataInfo.activateCountQoq }}%
                            <img v-if="Number(qoqdataInfo.activateCountQoq) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(qoqdataInfo.activateCountQoq) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
                <div class="contentItem">
                    <div class="isItem">
                        <div>本月达标数</div>
                        <div class="num">{{ qoqdataInfo.qualifyCount }}</div>
                    </div>
                    <div class="isItem">
                        <div>上月达标数</div>
                        <div class="num">{{ qoqdataInfo.lastMonthQualifyCount }}</div>
                    </div>
                    <div class="isItem isItem1">
                        <div>环比%</div>
                        <div class="num">
                            {{ qoqdataInfo.qualifyCountQoq }}%
                            <img v-if="Number(qoqdataInfo.qualifyCountQoq) < 0" class="ifUp" src="@/assets/shareData/lowIcon.png" />
                            <img v-if="Number(qoqdataInfo.qualifyCountQoq) > 0" class="ifUp" src="@/assets/shareData/upIcon.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { findExhibitionTrends } from '@/api/shareData.ts'
const active = ref('direct')
const yoydataInfo = ref({}) //同比
const qoqdataInfo = ref({}) //环比
const getfindExhibitionTrends = () => {
    findExhibitionTrends({
        type: active.value
    }).then(res => {
        yoydataInfo.value = res.object.yoy
        qoqdataInfo.value = res.object.qoq
    })
}
const onClickTab = () => {
    getfindExhibitionTrends()
}
getfindExhibitionTrends()
</script>
<style scoped lang="scss">
.card {
    background: #fff;
    padding: 10px;
    .topLeft {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: SimHei;
        font-weight: 500;
        color: #4d4d4d;
        img {
            width: 22px;
            height: 15px;
            margin-right: 5px;
        }
    }
    .contentItem {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background: #f8f8f8;
        font-family: SimHei;
        font-weight: 400;
        color: #4d4d4d;
        margin-top: 8px;
        .isItem {
            width: 38%;
            // text-align: center;
            .ifUp {
                width: 13px;
                height: 13px;
            }
        }
        .isItem1 {
            width: 24%;
        }
        .num {
            display: flex;
            align-items: center;
            margin-top: 9px;
            color: #000000;
            font-weight: 600;
            img {
                margin-left: 4px;
            }
        }
    }
}
</style>
